<script setup>
import axios from "@/utils/request";
import { reactive, ref, watch, computed, onMounted } from "vue";
import { store } from "@/store";
import i18n from '@/locales/index' 
const { t } = i18n.global

const formRef = ref();
const formState = ref({
  section: t('components.dg'),
}); // 表单数据
const versionOption = ref([]); // 工序版本列表

let configs = reactive([
  {
    label: t('hangManage.roadVerName'),
    column: "name",
    rules: [{ required: false, message: t('hangManage.pleaseInputVerName') }],
    placeholder: t('hangManage.pleaseInputVerName'),
    type: "input",
  },
  {
    label: t('menu.basic:section'),
    column: "section",
    rules: [{ required: true, message: t('basicData.pleaseSelectSection') }],
    type: "select",
    placeholder: t('basicData.pleaseSelectSection'),
    options: [{ label: t('components.dg'), value: "吊挂" }],
  },
  {
    label: t('basicData.processFormVer'),
    column: "processId",
    rules: [{ required: true, message: t('basicData.pleaseSelectProcessFormVer') }],
    type: "select",
    placeholder: t('basicData.pleaseSelectProcessFormVer'),
    options: [],
  },
  {
    label: t('deviceManage.waterLineNo'),
    column: "lineId",
    rules: [{ required: true, message: t('deviceManage.pleaseSelectWaterLineNo') }],
    type: "radio",
    options: [],
  },
]);
let props = defineProps({
  moId: {
    require: true,
    default: () => null,
  },
  moInfo: {
    require: true,
    default: () => {},
  },
  operateType: String,
});
const emits = defineEmits(["onLineProcesses"]);

// 流水线列表
const waterList = computed(() => {
  return store.state.normalData.waterList;
});
// 当前流水线
const currentLine = computed(() => {
  return store.state.setting.currentLine;
});

// 获取工序表版本列表
const getProcessVersionList = async (moId) => {
  try {
    const res = await axios.postAction("/api/mo/mo-proc/list", { moId });
    if (res.success) {
      versionOption.value = res.data || [];
      formState.value.processId = res.data[0].id;
      // console.log('*************isAdd.value', isAdd.value);
      // if (res.data.length && isAdd.value) {
      //   formState.value.processId = res.data[0].id;
      //   getProcessList(processVersionId.value, true);
      // }
    }
  } catch {
    versionOption.value = [];
    formState.value.processId = null;
  }
};

const handleOk = async () => {
  try {
    const values = await formRef.value.validatecolumns();
    console.log("🚀 ~ file: pathInfo.vue:42 ~ handleOk ~ values:", values);
  } catch (err) {
    console.log(err);
  }
};

const lineProcessesChange = () => {
  emits(
    "onLineProcesses",
    formState.value.lineId,
    formState.value.processId,
    true
  );
};

const initialData = async () => {
  await store.dispatch("getWater");
  if (currentLine.value && currentLine.value.id) {
    formState.value.lineId = currentLine.value.id;
  } else {
    if (waterList.value.length > 0)
      formState.value.lineId = waterList.value[0].id;
  }
  // await handleLineChange()
  if (props.moId) await getProcessVersionList(props.moId);

  // console.log(formState.value.lineId, "-----formState.value.lineId----");
  // console.log(formState.value.processId, "-----formState.value.processId----");
  emits("onLineProcesses", formState.value.lineId, formState.value.processId);
};

onMounted(async () => {
  await initialData();
  // await store.dispatch("getWater");
  // if (currentLine.value && currentLine.value.id) {
  //   formState.value.lineId = currentLine.value.id;
  // } else {
  //   if (waterList.value.length > 0)
  //     formState.value.lineId = waterList.value[0].id;
  // }
  // // await handleLineChange()
  // if (props.moId) await getProcessVersionList(props.moId);
  // console.log(formState.value.lineId, "-----formState.value.lineId----");
  // console.log(formState.value.processId, "-----formState.value.processId----");
  // emits("onLineProcesses", formState.value.lineId, formState.value.processId);
});

watch(
  () => props.moId,
  async (newVal) => {
    // console.log(newVal, "-----moId-newVal----");
    if (newVal) {
      await initialData();
    } else {
      formState.value = {
        section: "吊挂",
      };
    }
  },
  { deep: true, immediate: false }
);

defineExpose({
  formRef,
  formState,
});
</script>

<template>
  <div class="info">
    <div class="card">
      <div class="cardItem">
        <span class="label">{{ $t('hangManage.makeNo') }}:</span>
        <span>{{ props.moInfo.moNo }}</span>
      </div>
      <div class="cardItem">
        <span class="label">{{ $t('basicData.styleNo') }}:</span>
        <span>{{ props.moInfo.styleNo }}</span>
      </div>
      <div class="cardItem">
        <span class="label">{{ $t('basicData.styleNa') }}:</span>
        <span>{{ props.moInfo.styleName }}</span>
      </div>
    </div>

    <a-form
      :model="formState"
      @validatecolumns="handleOk"
      ref="formRef"
      layout="vertical"
    >
      <a-form-item
        v-for="(item, index) in configs"
        :key="index"
        :label="item.label"
        :rules="item.rules"
        :name="item.column"
      >
        <a-input
          :placeholder="item.placeholder"
          autoComplete="off"
          v-model:value.trim="formState[item.column]"
          v-if="item.type == 'input'"
          allowClear
          :maxLength="item.maxLength || 999999"
          :disabled="props.operateType == 'view'"
        />
        <a-select
          v-model:value="formState[item.column]"
          :placeholder="item.placeholder"
          v-if="item.type == 'select' && item.column == 'section'"
          :disabled="props.operateType == 'view'"
        >
          <a-select-option
            v-for="(option, i) in item.options"
            :value="option.value"
            :key="i"
          >
            {{ option.label }}
          </a-select-option>
        </a-select>
        <a-select
          v-model:value="formState[item.column]"
          :placeholder="item.placeholder"
          v-if="item.type == 'select' && item.column == 'processId'"
          :disabled="props.operateType == 'view'"
          @change="lineProcessesChange"
        >
          <a-select-option
            v-for="(option, i) in versionOption"
            :value="option.id"
            :key="i"
          >
            {{ option.name }}
          </a-select-option>
        </a-select>
        <a-radio-group
          v-model:value="formState[item.column]"
          :placeholder="item.placeholder"
          v-if="item.type == 'radio'"
          :disabled="props.operateType == 'view'"
          @change="lineProcessesChange"
        >
          <a-radio v-for="(option, i) in waterList" :value="option.id" :key="i">
            {{ option.lineNo }}
          </a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </div>
</template>

<style scoped lang="less">
.info {
}

.card {
  margin-bottom: 24px;
  color: #666666;
  border-radius: 8px;
  background-color: #f5f6f8;
  padding: 8px;
  line-height: 32px;
}
.label {
  display: inline-block;
  width: 64px;
}
</style>
